<%@ page import="java.sql.*" %>
<%@ page import="com.xxx.entity.User" %>
<%@ page import="com.xxx.DAO.booksDao" %>
<%@ page import="com.xxx.util.pageUtil" %>
<%@ page import="java.util.List" %>
<%@ page import="com.xxx.entity.Book" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.xxx.util.JDBCUtil" %>
<%@ page import="com.xxx.DAO.user_bookDao" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%--通过taglib标签引入所需的标签库--%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>图书资源页面</title>
	<%--    指定jquery库文件的位置--%>
	<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
	<script type="text/javascript">
		$(function (){
			$("#btn").click(function (){
				//获取dom的value值
				var bName1=$("#bName1").val();
				//发起Ajax请求
				$.ajax({
					url:"huixian",
					type:"get",
					data:{"bName1":bName1},
					dataType:"json",
					success:function (data){
						$("#bName").val(data.bName);
						$("#bAut").val(data.bAut);
						$("#bPub").val(data.bPub);
						$("#path").val(data.path);
						$("#bSum").val(data.bSum);
					}
				})
			});
		})
		// function huixian(id){
		// 	//1.创建异步对象
		// 	var xmlHttp=new XMLHttpRequest();
		// 	//2.绑定事件
		// 	xmlHttp.onreadystatechange=function (){
		// 		if (xmlHttp.readyState==4&&xmlHttp.status==200){
		// 			var data=xmlHttp.responseText;
		// 			//把json字符串转换为json字符串
		// 			var jsonobj=eval("("+data+")");
		// 			//更新dom对象
		// 			document.getElementById("path"+id).innerHTML=jsonobj.path;
		// 			document.getElementById("bName"+id).innerHTML=jsonobj.bName;
		// 			document.getElementById("bAut"+id).innerHTML=jsonobj.bAut;
		// 			document.getElementById("bPub"+id).innerHTML=jsonobj.bPub;
		// 			document.getElementById("bSum"+id).innerHTML=jsonobj.bSum;
		// 			// alert(data)
		// 		}
		// 	}
		//
		// 	//3.初始异步对象
		// 	xmlHttp.open("get","huixian?id="+id,true);
		//
		// 	//4.发送请求
		// 	xmlHttp.send();
		// }
	</script>
	<link rel="stylesheet" type="text/css" href="css/catalog1.css"/>
	<style>
		#add,#modify{
			position: absolute;
			z-index: 2;
			margin-left: 20%;
			background-color: lightgray;
			display: none;
			margin-top: 150px;
		}
		#add .cancel,#modify .cancel{
			font-weight: bold;
			border: 2px solid black;
			padding:5px;
			float: right;
			margin: 5px 5px 0 0;
		}
		#add form,#modify  form{
			width: 400px;
			height: 500px;
			padding: 50px;
			text-align: center;
			margin: 0px auto;
			margin-top: 5%;
			box-shadow: 20px 20px 5px #888888;
		}
		#add form input,#modify form input{
			padding: 10px;
			width: 300px;
			height: 30px;
			margin-bottom: 20px;
			display: inline-block;
			font-size: 30px;
			font-family: 楷体;
			border-radius: 5px;
		}
		#add form button,#modify form button{
			margin-top: 20px;
			font-size: 25px;
			width: 100px;
			padding: 5px;
			background-color: dodgerblue;
			color: white;
			font-family: 宋体;
			border-radius: 10px;
		}
	</style>
</head>
<body id="catalog_body">
<div id="catalog">
	<div id="catalog_header">
		<div id="catalog_nav">
			您的位置: <a href="Home.jsp">首页</a> > <a href="catalog.jsp">资源</a>
		</div>
		<div id="catalog_search">
			<form action="showTable2" method="post">
				<input type="text" name="search" id="search" value="" />
				<select name="bType" id="select">
					<option value="bName" selected="selected">书名</option>
					<option value="bAut">作者</option>
				</select>
				<button type="submit" style="float:left;">搜索</button>
			</form>
			<button style="float: right;" onmousedown="add()" id="b_add">书籍增加</button>
			<button style="float: right;" onmousedown="modify()" id="b_modify">修改</button>
		</div>
	</div>
	<!-- 增加书籍表单-->
	<div id="add">
		<button class="cancel"onmousedown="cancel(1)" id="b_cancel1" >X</button>
		<form action="addBook" >
			<input type="text" name="path"  placeholder="书籍封面" />
			<input type="text" name="bName"  placeholder="书名" />
			<input type="text" name="bAut"  placeholder="作者" />
			<input type="text" name="bPub"  placeholder="出版社" />
			<input type="text" name="bSum"  placeholder="数量" />
			<button type="reset">重置</button>
			<button type="submit" style="margin-left: 100px;">增加</button>
		</form>
	</div>
	<!--  修改书籍表单-->
	<div id="modify">
		<button class="cancel" onmousedown="cancel(0)" id="b_cancel0">X</button>
		<form action="updateBook">
			<input type="text" name="bName1" id="bName1" placeholder="您要修改的书的书名" />&nbsp;&nbsp;&nbsp;<input type="button" value="确认" id="btn" style="font-size: 15px;width: 50px;height: 50px;">
			<input type="text" name="path"  id="path"  placeholder="书籍封面" />
			<input type="text" name="bName" id="bName" placeholder="新书名" />
			<input type="text" name="bAut" id="bAut" placeholder="作者" />
			<input type="text" name="bPub" id="bPub" placeholder="出版社" />
			<input type="text" name="bSum" id="bSum" placeholder="数量" />
			<button type="reset">重置</button>
			<button type="submit" style="margin-left: 100px;">修改</button>
		</form>
	</div>
	<div id="content">
		<div id="catalog_left">
			<div id="classfiy">
				图书分类
			</div>
			<ul>
				<li><a href="showTable?type=1">文字</a></li>
				<li><a href="showTable?type=2">政治、法律</a></li>
				<li><a href="#">经济</a></li>
				<li><a href="#">历史、地理</a></li>
				<li><a href="#">文化、科学、教育、体育</a></li>
				<li><a href="#">哲学、宗教</a></li>
				<li><a href="#">社会科学总论</a></li>
				<li><a href="#">语言、文字</a></li>
				<li><a href="#">艺术</a></li>
				<li><a href="#">工业技术</a></li>
				<li><a href="#">马克思主义、列宁主义、毛泽东思想、邓小平理论</a></li>
				<li><a href="#">地球科学</a></li>
				<li><a href="#">环境科学、安全科学</a></li>
				<li><a href="#">医药、卫生</a></li>
				<li><a href="#">军事</a></li>
				<li><a href="#">农业科学</a></li>
				<li><a href="#">综合性科学</a></li>
				<li><a href="#">数理科学和化学</a></li>
				<li><a href="#">自然科学总论</a></li>
				<li><a href="#">生物科学</a></li>
				<li><a href="#">交通运输</a></li>
				<li><a href="#">航天、航空</a></li>
			</ul>
		</div>
		<div id="catalog_right">
			<%JDBCUtil util=new JDBCUtil();%>
			<table width="650px" border="0" align="center" cellpadding="4" cellspacing="1" id="table1">
				<tbody>
				<tr>
					<th>书名</th>
					<th>作者</th>
					<th>出版社</th>
					<th>剩余数量</th>
					<th>操作</th>
					<%--						<th>图片</th>--%>
				</tr>
				<%--连接数据库--%>
				<c:forEach var="book" items="${list}">
					<tr>
						<td><img src="${book.path}" /><br><a href="showBook?bName=${book.bName}" >${book.bName}</a></td>
						<td>${book.bAut}</td>
						<td>${book.bPub}</td>
						<td>${book.bSum}</td>
						<td><div id="footer">
							<a href="deleteBook?bName=${book.bName}" onclick="return del()">删除</a><br>
						</div>
						</td>
						</td>
					</tr>
				</c:forEach>
				<tr align="center">
					<th colspan="8">
						当前页数${iPage}/${iPageCnt}
						<c:if test="${iPage>1}">
							<a href="showTable2?page=1">第一页</a>
							<a href="showTable2?page=${iPage-1}">上一页</a>
						</c:if>
						<c:if test="${iPage<requestScope.iPageCnt}">
							<a href="showTable2?page=${iPage+1}">下一页</a>
							<a href="showTable2?page=${iPageCnt}">页尾</a>
						</c:if>
					</th>
				</tr>
				</tbody>
			</table>
			<%--					<img src="img/person1.jpg"/>--%>
		</div>

	</div>
</div>
</body>
</html>
<script type="text/javascript">
	function add() {
		document.getElementById("b_add").onclick = function() {
			document.getElementById('add').style.display = "block";
		}
	}
	function modify() {
		document.getElementById("btn_modify"+id).onmousedown = function() {
			document.getElementById("modify"+id).style.display = "block";
		}
	}
	function cancel(x) {
		switch(x) {
			case 1:
				document.getElementById("b_cancel1").onclick = function() {
					document.getElementById("add").style.display = "none";
				}
				break;
			case 0:
				document.getElementById("b_cancel0").onclick = function() {
					document.getElementById("modify").style.display = "none";
				}
				break;
		}
	}
	var $btns = document.querySelectorAll('#b_modify');

	function onClick(e) {
		document.getElementById("modify").style.display = "block";
	}
	[].forEach.call($btns, function($btn) {

		$btn.addEventListener('click', onClick);

	})

	function del(){
		if(confirm("是否确认删除")){
		}
		else return false;
	}
</script>